<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <el-form :inline="true" :model="search" size="mini" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="success" @click="createUser">添加用户</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="deleteUsers">批量删除</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="search.name" placeholder="请输入需要查询的姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getUsersList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- @selection-change="handleSelectionChange" -->
            <el-table :data="users" stripe ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>

                <el-table-column prop="UserID" label="编号" width="60">

                </el-table-column>
                <el-table-column prop="Path" label="头像" width="100">
                    <template #default="{ row }">
                        <!-- 对头像的相对路径转换成绝对路径 -->
                        <el-avatar size="medium" :src="imgUrl + row.Path"></el-avatar>
                    </template>
                </el-table-column>
                
                <el-table-column prop="UserName" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="Sex" label="性别" width="60">
                </el-table-column>
                <el-table-column prop="Phone" label="手机">
                </el-table-column>
                <el-table-column prop="Birthday" label="出生日期" width="120">
                    <template #default="{ row }">
                        {{ row.Birthday | timeSlot }}
                    </template>
                    <!-- <template slot-scope="scope">
                        {{ scope.row.Birthday|timeSlot }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="DeptName" label="部门">
                </el-table-column>
                <el-table-column prop="RoleName" label="角色">
                </el-table-column>

                <el-table-column label="状态">
                    <template #default="{ row }">
                        <el-switch disabled v-model="row.Status" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button type="warning" size="small" style="margin-right: 10px;"
                            @click="updateUser(row)">修改</el-button>

                        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="确实删除此用户吗？" @confirm="deleteUser(row.UserID)">
                            <el-button type="danger" slot="reference" size="small">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination style="margin-top: 15px;" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="page" :page-size="size"
                :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-card>


        <el-dialog title="添加用户" append-to-body :visible.sync="createDialogVisible" width="450">
            <Create :dialogVisible.sync="createDialogVisible" @refresh="getUsersList"></Create>
        </el-dialog>

        <el-dialog title="修改用户" append-to-body :visible.sync="editDialogVisible" width="450">
            <Edit :dialogVisible.sync="editDialogVisible" :data="user" @refresh="getUsersList"></Edit>
        </el-dialog>
    </div>
</template>

<script>
import basepath from '@/plugins/base'
import Create from './Create.vue'
import Edit from './Edit.vue'

export default {
    name: '',
    data() {
        return {
            imgUrl: '',
            //查询搜索
            search: {
                name: "",
            },

            //复选框
            multipleSelection: [],

            //分页列表
            count: 0,
            size: 5,
            page: 1,
            users: [],

            user: {

            },


            createDialogVisible: false,
            editDialogVisible: false
        }
    },
    filters: {
        timeSlot(value) {
            return value.substr(0, 10);
        }
    },
    created() {
        this.imgUrl = basepath.imgUrl;
        this.getUsersList();
    },
    methods: {

        //获取用户列表数据
        getUsersList() {
            this.axios({
                method: 'get',
                url: 'Users',
                params: { page: this.page, limit: this.size, name: this.search.name },
                data: {},
                //headers:{Authorization: this.user.Token}
            }).then(res => {
                //console.log('res: ', res);
                this.count = res.data.count;
                this.users = res.data.data;
            }).catch(err => {
                console.log('err: ', err);
            })
        },

        //切换每页条数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page = 1;
            this.size = val;
            this.getUsersList();
        },
        //翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getUsersList();
        },

        //添加用户  弹窗
        createUser() {
            this.createDialogVisible = true;
        },

        //删除单个数据
        deleteUser(uid) {

            this.axios({
                method: 'delete',
                url: 'Users/' + uid
            }).then(res => {
                console.log('res: ', res);
                if (res.data.code > 0) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });

                    this.getUsersList(); //刷新

                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }
            }).catch(err => {
                console.log('err: ', err);
            })
        },
        //批量删除
        handleSelectionChange(val) {
            //保存选中的行数据
            this.multipleSelection = val;
        },
        deleteUsers() {
            let ids = [];
            ids = this.multipleSelection.map(v => v.UserID);
            if (ids.length > 0) {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.axios({
                        method: 'delete',
                        url: 'Users',
                        params: {},
                        data: ids
                    }).then(res => {
                        console.log('res: ', res);
                        if (res.data.code > 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });

                            this.getUsersList(); //刷新

                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })
                        }
                    }).catch(err => {
                        console.log('err: ', err);
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    message: '请选择需要删除的数据！',
                    type: 'warning'
                })
            }



            //批量删除的 id 数组
            //console.log('ids: ', ids);
        },


        updateUser(row) {
            //row.Birthday =  row.Birthday.substr(0,10);
            this.user = row;
            this.editDialogVisible = true;
        },


    },

    components: {
        Create, Edit
    }


}
</script>

<style scoped>
/* .demo-form-inline {
    float: right;
} */

.demo-form-inline .el-form-item {
    margin-bottom: 0px;
}
</style>